<template>
  <div class="down">
    <el-dialog
      title="下载海报"
      width="800"
      :model-value="showDialogPoster"
      @close="close"
      :close-on-click-modal="false"
    >
      <div class="bgBox">
        <div class="bgBoxLeft">
          <img
            class="img"
            @click="leftImg(item, index)"
            :class="current == index ? 'active' : ''"
            v-for="(item, index) in deafultImg"
            :key="item.id"
            :src="item.poster"
          />
        </div>
        <div class="bgBoxRight">
          <div class="bgBoxRight_pic">
            <div class="img">
              <img :src="deafultImg[current].poster" />
            </div>
            <el-button class="download" type="primary" @click="downPoster"
              >下载海报</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const current = ref(0);
const emits = defineEmits(['update:showDialogPoster']);
const props = defineProps({
  showDialogPoster: {
    type: Boolean,
    default: false,
  },
  deafultImg: {
    type: Array,
    default: () => [],
  },
});

const leftImg = (item, index) => {
  current.value = index;
};
const close = () => {
  emits('update:showDialogPoster', false);
};
const downPoster = () => {
  let image = new Image();
  image.setAttribute('crossOrigin', 'anonymous');
  image.src = props.deafultImg[current.value].poster;
  image.onload = () => {
    let canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    let ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, image.width, image.height);
    canvas.toBlob((blob) => {
      let url = URL.createObjectURL(blob);
      download(url, name);
      // 用完释放URL对象
      URL.revokeObjectURL(url);
    });
  };
};
const download = (url) => {
  let eleLink = document.createElement('a');
  eleLink.download = '';
  eleLink.href = url;
  eleLink.click();
  eleLink.remove();
};
</script>

<style scoped lang="scss">
.bgBox {
  position: relative;
  display: flex;
  justify-content: space-between;

  .bgBoxLeft {
    position: relative;
    width: 150px;
    max-height: 460px;
    overflow: hidden;
    overflow-y: auto;

    .img {
      width: 140px;
      cursor: pointer;
      margin-top: 2px;
      display: block;
      // max-height: 400px;
      // overflow-y: auto;
      // overflow: hidden;
      margin-right: 2px;
    }

    .img.active {
      border: 2px solid #165dff;
    }
  }

  .bgBoxRight {
    width: 650px;
    height: 100%;
    background: #f2f3f5;
    border-radius: 0 0 8px 0;
    flex-direction: column;
    position: relative;

    .img {
      img {
        display: block;
      }
    }

    .bgBoxRight_pic {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 375px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .download {
        margin-top: 20px;
      }

      .img {
        width: 375px;
        height: 570px;
        margin-top: 2px;
        // overflow: hidden;
        overflow-y: auto;
        max-height: 400px;

        img {
          width: 375px;
        }
      }
    }
  }
}
</style>
